<template>
  <view class="container" @click="toGoodsDetail(item.id)">
    <view class="item-img">
      <image :src="item.thumb_url||errImgUrl" mode="widthFix"/>
    </view>
    <view class="item-right">
      <view class="item-des">{{item.name}}</view>
      <view class="price">
        <span>{{item.desc}}</span>
<!--        <image @click.stop="showCartModal(item.id)" class="img" src="../../static/mipmap-xhdpi/plus.png" />-->
      </view>
    </view>

    <cart-dialog :showModal="showModal" :goodsId="id" @hideCartModal="hideCartModal"></cart-dialog>

  </view>
</template>

<script>
import cartDialog from '../cart-dialog/cart-dialog.vue'

export default {
    components: {
        cartDialog
    },
    props: {
        item: ''
    },
    data() {
        return {
            showModal: false,
            errImgUrl: 'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/yaojike2020/images/other/loading_error.png',
            id: ''
        }
    },
    watch: {},
    methods: {

        //跳转商品详情
        toGoodsDetail(id) {
            wx.navigateTo({url: '/pages/goodsDetail/goodsDetail?id=' + id})
        },

        //显示购物车
        async showCartModal(id) {
          this.id = id;
          this.showModal = true;
          try {
            await wx.hideTabBar({})
          } catch (e) {

          }
        },

        //隐藏购物车
        async hideCartModal() {
          this.id = ''
          this.showModal = false;
          try {
            await wx.showTabBar({})
          } catch (e) {

          }
        },

    }
}
</script>

<style lang="scss" scoped>
@import "../../common/css/mixin";

.container {
    width: 345rpx;
    padding: 20rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background: #ffffff;
    @include flex();
    flex-direction: column;

    .item-img {
        width: calc((100vw - 120rpx) / 2);
        height: calc((100vw - 120rpx) / 2);
        border-radius: 16rpx;
        overflow: hidden;
        display: flex;
        align-items: center;

        image {
            width: calc((100vw - 120rpx) / 2);
        }
    }

    .item-right {
        @include flex();
        flex-direction: column;
        height: 19vw;
        width: 100%;
        justify-content: space-between;

        .item-des {
            color: #444444;
            /* height: 6vw; */
            line-height: 6vw;
            width: 100%;
            font-size: 15px;
            @include ellipsis(2);
        }

        .item-info {
            /* height: 6vw; */
            line-height: 6vw;
            width: 100%;
            font-size: 24rpx;
            color: #aaaaaa;
            @include ellipsis(1);

        }

        .price {
            font-size: 25rpx;
            @include flex(flex-start, flex-end);
            flex-direction: row;
            height: 8vw;
            width: 100%;
            color: #b9b8b8;
            font-weight: bold;
            position: relative;

            .original {
                font-size: 22rpx;
                color: #707070;
                text-decoration: line-through;
                padding-left: 20rpx;
            }

            .img {
                margin-left: auto;
                width: 22px;
                height: 22px;
            }

            .img-icon {
                position: absolute;
                bottom: 20rpx;
                right: 0;
                width: 20rpx;
                height: 20rpx;
                background: #e12317;
                border-radius: 360rpx;
                color: #ffffff;
                font-size: 18rpx;
                text-align: center;
                line-height: 20rpx;
            }
        }

        .sale_count {
            position: relative;
            font-size: 24rpx;
            color: #b2b2b2;
            width: 100%;
            height: 40rpx;
            line-height: 40rpx;
            @include flex(flex-start);

            .img {
                margin-left: auto;
                width: 40rpx;
                height: 40rpx;
            }

            .img-icon {
                position: absolute;
                bottom: 20rpx;
                right: 0;
                width: 20rpx;
                height: 20rpx;
                background: #e12317;
                border-radius: 360rpx;
                color: #ffffff;
                font-size: 18rpx;
                text-align: center;
                line-height: 20rpx;
            }
        }
    }

}

</style>
